<script setup lang="ts">
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import ProfileDrawer from '@/components/ProfileDrawer.vue'

const userStore = useUserStore()

// 确保每次刷新都获取用户信息
onMounted(() => {
  userStore.fetchUserInfo()
})
</script>

<template>
  <div id="app-wrapper">
    <RouterView />
    <ProfileDrawer />
  </div>
</template>

<style>
/* 这里我们使用普通的 <style> 标签，而不是 <style scoped>
  这样样式才能应用到全局，修正最顶层的布局问题。
*/
html,
body {
  /* 强制浏览器在计算元素尺寸时，将 padding 和 border 包含在内。
    这是一个现代CSS开发的标准实践，可以避免很多宽度计算问题。
  */
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#app-wrapper {
  /* 
    1. max-width: 100% 确保我们的应用容器永远不会比屏幕宽。
    2. overflow-x: hidden 强制裁剪掉任何试图横向溢出的子元素内容。
  */
  max-width: 100%;
  overflow-x: hidden;
}
</style>
